import { View, Text, Map, Button, Image } from "@tarojs/components";
import { useState, useEffect, useMemo } from "react";
import Taro, { useRouter, useDidShow } from "@tarojs/taro";

import {
  AtList,
  AtListItem,
  AtButton,
  AtActionSheet,
  AtActionSheetItem,
  AtModal,
  AtModalContent,
  AtModalAction,
  AtMessage
} from "taro-ui";

import { getProjectUserApi, unbindProjectUserApi } from "../../../utils/api";

const Project = () => {
  const router = useRouter();

  // 工程用户
  const [userList, setUserList] = useState([]);
  const [actionOpen, setActionOpen] = useState(false);
  const [userId, setUserId] = useState("");

  const [modalOpen, setModalOpen] = useState(false);

  // 1-操作工；2-配置员；3-管理员。
  const roleMap = {
    1: "操作工",
    2: "配置员",
    3: "管理员"
  };

  useDidShow(() => {
    getUsers();
  });

  // 获取工程用户
  const getUsers = async () => {
    const res = await getProjectUserApi({
      access_token: "xxxx",
      user_id: "1",
      project_id: router.params.id
    });
    if (res.res === 0) {
      setUserList(res.records);
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "warning"
      });
    }
  };

  // 去绑定用户
  const gotoBind = () => {
    Taro.navigateTo({
      url: "/pages/packagea/project_user_bind/index?id=" + router.params.id
    });
  };

  // 打开面板
  const open = item => {
    setUserId(item.user_id);
    setActionOpen(true);
  };

  const actionClose = () => {
    setActionOpen(false);
  };

  const deleteUser = () => {
    setModalOpen(true);
    setActionOpen(false);
  };

  const confirmModal = async () => {
    const res = await unbindProjectUserApi({
      access_token: "xxxx",
      user_id: "1",
      project_id: router.params.id,
      target_user_id: userId
    });
    if (res.res === 0) {
      Taro.atMessage({
        message: "删除成功",
        type: "success"
      });
      setModalOpen(false);
      getUsers();
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "warning"
      });
    }
  };

  // 关闭删除modal
  const closeModal = () => {
    setModalOpen(false);
  };

  return (
    <View className="index">
      <AtList>
        {userList.map(item => {
          return (
            <AtListItem
              title={
                item.name + (roleMap[item.role] ? "-" + roleMap[item.role] : "")
              }
              extraText={item.mobile}
              onClick={() => open(item)}
            />
          );
        })}
      </AtList>

      <AtButton type="primary" size="normal" onClick={gotoBind}>
        绑定新用户
      </AtButton>

      <AtActionSheet
        isOpened={actionOpen}
        cancelText="取消"
        onClose={actionClose}
        onCancel={actionClose}
      >
        <AtActionSheetItem onClick={deleteUser}>删除用户</AtActionSheetItem>
      </AtActionSheet>

      {/* 删除确认 */}
      <AtModal isOpened={modalOpen} closeOnClickOverlay={false}>
        <AtModalContent>您确定要删除该用户吗?</AtModalContent>
        <AtModalAction>
          {" "}
          <Button onClick={closeModal}>取消</Button>{" "}
          <Button onClick={confirmModal}>确定</Button>{" "}
        </AtModalAction>
      </AtModal>
      <AtMessage />
    </View>
  );
};

export default Project;
